<template>
  <div style="padding: 5px;">
    <el-card class="box-card">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple" />
          <span>店铺名称:</span>
          <el-input v-model="query" placeholder="请输入内容" size="medium" />
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light" />
          <span>行业:</span>
          <el-select
            v-model="value"
            placeholder="请选择"
            size="medium"
            @change="btn"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple" />
          <el-button type="primary" size="medium" @click="btnclear"
            >查询</el-button
          >
          <el-button size="medium" @click="resetting">重置</el-button>
        </el-col>
      </el-row>
      <el-alert
        title="审核店铺，店铺审核通过之后，店铺既可在线上上线运营，品台将正式开始对店铺进行管理"
        :closable="false"
        type="info"
        show-icon
      />
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" :border="false" style="width: 100%;">
            <el-table-column prop="storeerial" label="店铺编号" width="200" />
            <el-table-column prop="storename" label="店铺名称" width="100" />
            <el-table-column
              header-align="center"
              align="center"
              prop="storeindustry"
              label="店铺行业"
            />
            <el-table-column
              prop="storeaddress"
              header-align="center"
              label="店铺地址"
            />
            <el-table-column prop="phone" align="center" label="联系电话" />
            <el-table-column
              header-align="center"
              align="center"
              prop="promoterId"
              label="推广人ID"
              width="160"
            />
            <el-table-column
              header-align="center"
              align="center"
              prop="state"
              label="状态"
            />
            <el-table-column
              header-align="center"
              align="center"
              prop="ramark"
              label="备注"
            />
            <el-table-column prop="operation" label="操作">
              <template #default="{ row }">
                <el-link type="primary"> {{ row.operation }} </el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-pagination
            background
            :current-page="qureInfo._page"
            :page-sizes="[1, 2, 5, 7]"
            :page-size="qureInfo._limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { getaudit, getauditpage, getauditquery } from '@/api/table'
export default {
  name: 'Openshop',
  data() {
    return {
      tableData: [],
      options: [],
      query: '',
      value: '',
      qureInfo: {
        _page: 1, // 当前页码值
        _limit: 5 // 每页显示条数
      },
      total: 0
    }
  },
  created() {
    this.getauditpage()
    this.getaudit()
  },
  methods: {
    resetting() {
      this.query = ''
      this.value = ''
    },
    btn() {
      this.options = []
      console.log(this.options)
      this.getaudit()
    },
    async btnclear() {
      if (this.query) {
        const { data } = await getauditquery({ storename: this.query })
        console.log(data, 'gg')
        this.tableData = data
      } else if (this.value) {
        const { data } = await getauditquery({ storeindustry: this.value })
        console.log(data, 'gg')
        this.tableData = data
      } else if (this.query && this.value) {
        const { data } = await getauditquery({
          storename: this.query,
          storeindustry: this.value
        })
        console.log(data, 'gg')
        this.tableData = data
      } else {
        this.getauditpage()
      }
    },
    handleSizeChange(val) {
      this.qureInfo._limit = val
      this.getauditpage()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.qureInfo._page = val
      this.getauditpage()
    },
    async getauditpage() {
      const data = await getauditpage(this.qureInfo)
      console.log(data, 'k')
      this.tableData = data.data
      this.total = data.headers['x-total-count'] - 0
      // console.log(this.total);
    },
    async getaudit() {
      const { data } = await getaudit()
      data.forEach((item) => {
        this.options.push({ label: item.storeindustry })
      })
      // console.log(this.options, '0.00');
    }
  }
}
</script>
<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  height: 100%;
  padding-bottom: 30px;
  .el-row {
    position: relative;
    display: flex;
    margin-top: 20px;
    .el-col {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-input {
        width: 200px;
        margin-left: 5px;
      }
      .el-select {
        width: 250px;
        margin-left: 5px;
      }
    }
  }
  .el-alert {
    margin-top: 50px;
    background-color: #e6f7ff;
    margin-bottom: 15px;
  }
  ::v-deep .el-alert__icon {
    color: #078fea;
  }
  ::v-deep .el-table__header-wrapper {
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
  }
  ::v-deep .el-pagination__total {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: flex-start;
  }
  .el-pagination {
    margin-left: 500px;
  }
  .el-col-24 {
    margin-top: 10px;
  }
}
</style>
